<template>
  <div class="users">
    <Crumbs :bread='bread'></Crumbs>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" v-model="page.query" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="userssearch"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="dialogVisible=true">添加用户</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border :stripe="true" style="width: 100%;" :header-cell-style="{
              textAlign: 'center',
              height: '40px',
          }">
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column prop="username" label="姓名">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="create_time" label="电话">
        </el-table-column>
        <el-table-column prop="role_name" label="角色">
        </el-table-column>
        <el-table-column prop="role_name" label="状态">
          <template slot-scope="scope">
              <el-switch
              v-model="scope.row.mg_state"
                @change="usersstate(scope.row.id,scope.row.mg_state)"
                active-color="#13ce66"
                inactive-color="#ff4949">
  </el-switch>
</template>
    </el-table-column>
    <el-table-column
      label="操作">
<template slot-scope="scope">
  <el-button type="primary" icon="el-icon-edit" size="mini" @click="deit(scope.row.id)">
  </el-button>
  <el-button type="warning" icon="el-icon-s-tools" size="mini"></el-button>
  <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"></el-button>
</template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <Pages :total='total' :pagesize='page.pagesize' :pagenum='page.pagenum' @handpagesize='handpagesize' @handpagenum='handpagenum'></Pages>
       </el-card>
       <!-- 添加 -->
<el-dialog
  title="添加用户"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="180px" :rules="rules">
    <el-form-item label="用户名" prop="username" >
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" >
    <el-input v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email" >
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile" >
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改 -->
<el-dialog
  title="修改用户"
  :visible.sync="dialogVisible1"
  width="60%"
  :before-close="handleClose">
  <el-form ref="form1" :model="form1" label-width="180px" :rules="rules">
    <el-form-item label="用户名" prop="username"  >
    <el-input v-model="form1.username" :disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form1.email"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile" >
    <el-input v-model="form1.mobile"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="edit">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
  import Pages from '@/components/paging.vue'
  import Crumbs from "@/components/crumbs.vue";
  import {
    users,
    state,
    adduser,
    deluser,
    deituser,
    huiuser
  } from "@/until/http";
  export default {
    components: {
      Crumbs,
      Pages
    },
    data() {
      var mobile = (rule, value, callback) => {
        var mobilejy = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
        if (!mobilejy.test(value)) {
          return callback("手机号格式不正确");
        }
        callback();
      };
      var email = (rule, value, callback) => {
        var emailyz = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!emailyz.test(value)) {
          return callback("邮箱格式不正确");
        }
        callback();
      };
      return {
        tableData: [],
        page: {
          query: 0,
          pagenum: 1,
          pagesize: 5
        },
        total: null,
        dialogVisible: false,
        dialogVisible1: false,
        form: {
          username: "",
          password: "",
          email: "",
          mobile: ""
        },
        editId: null,
        form1: {
          username: "",
          email: "",
          mobile: "",
        },
        rules: {
          username: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 3,
              max: 5,
              message: "长度在 3 到 8 个字符",
              trigger: "blur"
            },
          ],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
          mobile: [{
              required: true,
              message: "请输入手机号",
              trigger: "blur"
            },
            {
              validator: mobile,
              trigger: "blur"
            },
          ],
          email: [{
              required: true,
              message: "请输入邮箱",
              trigger: "blur"
            },
            {
              validator: email,
              trigger: "blur"
            },
          ],
        },
        bread: [{
            id: 1,
            path: "",
            title: "用户管理"
          },
          {
            id: 2,
            path: "",
            title: "用户列表"
          }
        ]
      };
    },
    mounted() {
      this.setlist();
    },
    methods: {
      //用户列表数据
      async setlist() {
        const {
          data: res
        } = await users(this.page);
        this.tableData = res.data.users;
        this.total = res.data.total;
      },
      handpagesize(val) {
        console.log(`每页 ${val} 条`);
        this.page.pagesize = val;
        this.setlist();
      },
      handpagenum(val) {
        this.page.pagenum = val;
        this.setlist();
      },
      //状态修改
      async usersstate(id, type) {
        const {
          data: res
        } = await state(id, type)
        console.log(res)
      },
      handleClose() {
        this.dialogVisible = false
      },
      // 添加用户
      async add() {
        const {
          data: res
        } = await adduser(this.form)
        console.log(res)
        if (res.meta.status == 201) {
          this.dialogVisible = false;
          this.setlist()
          this.$message.success(res.meta.msg)
        }
        if (res.meta.status == 400) {
          this.$message.error(res.meta.msg)
        }
      },
      //删除用户
      del(id) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async() => {
            var res = await deluser(id);
            console.log(res);
            this.setlist();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //回填
        async deit(id){
      const {data:res}= await huiuser(id);
      console.log(res);
      this.dialogVisible1=true
      this.form1.username= res.data.username
      this.form1.email= res.data.email
      this.form1.mobile= res.data.mobile
      this.editId= id;
    },
    async edit(){
      let obj={id:this.editId,
      email:this.form1.email,
      mobile:this.form1.mobile}
      const {data:res}= await deituser(obj);
      // console.log(res);
       if (res.meta.status == 200) {
        this.setlist();
        this.dialogVisible1=false;
      }
    },
      async userssearch() {
        if (this.page.query == '') {
          return this.setlist()
        }
        var res = await chauser(this.page.query)
        // this.tableData=res.data.data.users
        this.setlist()
      },
    },
         watch:{
            tableData:{
                handler(n){
                    if(this.page.pagenum>1&&n.length==0){
                        this.page.pagenum-=1;
                        this.setlist()
                    }
                }
            }
        }
  };
</script>
<style scoped>
  .users {
    padding: 0;
    margin: 0;
  }
  .el-card .el-table {
    margin-top: 20px;
  }
  .el-table-column {
    height: 200px;
  }
</style>